import React, { useState } from 'react'
import styles from './index.module.scss'
import NavBar from '@/components/nav-bar'
import Textarea from '@/components/textarea'
import Input from '@/components/input'
import { useSelector } from 'react-redux'
export default function EditInput({ onLeftClick, type, onCommit }) {
  const defaultValue = useSelector((state) => state.profile.profile[type])
  const [value, setValue] = useState(defaultValue || '')
  // 文本框和输入款的change事件
  const onChange = (e) => {
    setValue(e.target.value)
  }
  return (
    <div className={styles.root}>
      <NavBar
        extra={
          <span className="commit-btn" onClick={() => onCommit(type, value)}>
            提交
          </span>
        }
        onLeftClick={onLeftClick}
      >
        编辑{type === 'name' ? '昵称' : '简介'}
      </NavBar>
      <div className="content-box">
        <h3>{type === 'name' ? '昵称' : '简介'}</h3>
        {type === 'name' ? (
          <Input
            autoFocus
            value={value}
            onChange={onChange}
            className="input-wrap"
          ></Input>
        ) : (
          <Textarea
            placeholder="请输入昵称"
            value={value}
            onChange={onChange}
          ></Textarea>
        )}
      </div>
    </div>
  )
}
